<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket测试</title>
    <style>
        #myServer {
            height: 300px;
        }

        #myClient {
            height: 100px;
        }

        .input-area {
            width: 500px;

        }
    </style>
</head>
<body>
<h3>myServer</h3>
<textarea id="myServer" class="input-area"></textarea><br/>
<button id="btnServer" onclick="btnServerDo()">清空</button>
<br/>
<h3>myClient</h3>
<textarea id="myClient" class="input-area">你好</textarea><br/>
<button id="btnClient" onclick="btnClientDo()">提交</button>
</body>
<script>
    var websocket;

    //如果浏览器支持WebSocket
    if (window.WebSocket) {
        websocket = new WebSocket("ws://10.26.180.84:21775/ws");  //获得WebSocket对象

        //当有消息过来的时候触发
        websocket.onmessage = function (event) {
            var respMessage = document.getElementById("myServer");
            var data = JSON.parse(event.data);
            //去除多余的消息
            /*if (respMessage.value.split("\n").length > 20) {
                respMessage.value = "";
            }*/
            respMessage.value = respMessage.value + '\n\n' + formatDateTime(data.date) + "\n[" + data.from + ']说：' + data.content
            respMessage.scrollTop = respMessage.scrollHeight
        }

        //连接关闭的时候触发
        websocket.onclose = function (event) {
            var respMessage = document.getElementById("myServer");
            respMessage.value = respMessage.value + "\n断开连接";
            respMessage.scrollTop = respMessage.scrollHeight
        }

        //连接打开的时候触发
        websocket.onopen = function (event) {
            var respMessage = document.getElementById("myServer");
            respMessage.value = "建立连接";
            respMessage.scrollTop = respMessage.scrollHeight
        }
    } else {
        alert("浏览器不支持WebSocket");
    }

    function sendMsg(msg) { //发送消息
        var transJson = {
            type:'chat_all',
            to:'',
            from:'',
            date:'',
            content:msg
        }
        if (window.WebSocket) {
            if (websocket.readyState == WebSocket.OPEN) { //如果WebSocket是打开状态
                websocket.send(JSON.stringify(transJson)); //send()发送消息
            }
        } else {
            return;
        }
    }


    function btnServerDo() {
        document.getElementById("myServer").value = "";
    }

    function btnClientDo() {
        var reqMessage = document.getElementById("myClient").value
        sendMsg(reqMessage)
    }

    function formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
    };
</script>
</html>

<!--
0 ：对应常量CONNECTING (numeric value 0)，
正在建立连接，还没有完成。The connection has not yet been established.
1 ：对应常量OPEN (numeric value 1)，
连接成功建立，可以进行通信。The WebSocket connection is established and communication is possible.
2 ：对应常量CLOSING (numeric value 2)
连接正在进行关闭握手，即将关闭。The connection is going through the closing handshake.
3 : 对应常量CLOSED (numeric value 3)
连接已经关闭或者根本没有建立。The connection has been closed or could not be opened.
-->
